/* @START: top bar styles
 * @Author: Hewel
 * @Date: 2018-04-02 12:27:16
 * @Last Modified by: Hewel
 * @Last Modified time: 2018-04-05 14:06:32
 */

#top-bar {
    display: flex;
    position: absolute;
    width: 100%;
    height: $bar-height;
    background: $card-color;
    box-shadow: $card-shadow;
    z-index: 15;
    .bar-logo {
        display: flex;
        align-items: center;
        .logo-img {
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            width: $menu-width;
            height: $bar-height;
            margin-right: $content-margin-row;
            color: $main-color;
            transition: 200ms color ease-in-out;
            &:hover {
                color: $base-color;
            }
            svg {
                width: $logo-size;
                height: $logo-size;
            }
        }
        span {
            font-size: $logo-font-size;
        }
        span.hewel {
            font-size: 1.2rem;
            color: $font-color-light;
            margin-top: .7rem;
            padding-left: $title-margin-right;
            a {
               color: $main-color;
               font-weight: 500;
               margin-left: .6rem;
               &:hover {
                   color: $base-color;
               }
            }
        }
    }
}
